<template>
  <div id="cpn-anime-btn-field" :class="{ [anime]: animeClass }" ref="animeBtn" @click="!animeClass && btnClick()"
    :style="{ '--width': width, '--height': height }">
    <slot></slot>
    <div class="str f14 font5">{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: 'aBtn',
  props: {
    // 一加载就出发动画
    isShowCreateAnime: {
      typeof: Boolean,
      default: false
    },
    message: {
      typeof: String,
      default: ''
    },
    // 自定义宽高
    width: {
      type: String,
      default: '120px'
    },
    height: {
      type: String,
      default: '40px'
    },
    // 自定义动画
    anime: {
      type: String,
      default: 'jello-horizontal'
    }
  },
  data() {
    return {
      animeClass: false
    }
  },
  mounted() {
    this.createAnime()
  },
  methods: {
    createAnime() {
      if (this.isShowCreateAnime) {
        this.animeClass = true
        setTimeout(() => {
          this.animeClass = false
        }, 900)
      }
    },
    btnClick() {
      let time
      this.animeClass = true
      time = setTimeout(() => {
        this.animeClass = false
        this.$emit('click')
        time = null
      }, 600)
    }
  }
}
</script>

<style lang="scss" scoped>
#cpn-anime-btn-field {
  width: var(--width);
  height: var(--height);
  background-color: $themeColor;
  display: flex;
  justify-content: center;
  align-items: center;
  .str {
    margin-left: 5px;
    display: inline-block;
    opacity: 0;
    width: 0;
    overflow: hidden;
  }

  &:hover .str {
    -webkit-animation: tracking-in-expand .7s cubic-bezier(.215, .61, .355, 1.000) both;
    animation: tracking-in-expand .7s cubic-bezier(.215, .61, .355, 1.000) both;
    transform: .7s;
    opacity: 1;
    width: auto;
  }

}

.jello-horizontal {
  -webkit-animation: jello-horizontal .7s both;
  animation: jello-horizontal .7s both;
}</style>